<template>
  <div class="container">
    <EchartMap :seriesNameProp="ChinaMapName" :seriesMapProp="ChinaSeriesMap" :mapUrlProp="ChinaMapUrl" :titleProp="{}" :baseMapProp="dataChinaMap" :seriesMapZoomProp="ChinaMapZoom" :seriesDataProp="ChinaMapData" :visualMapProp="ChinaMapVMap" :specialAreasProp="{}" :showVisualMap="showVisualMap" :mapBgColorProp="mapBgColorProp" :mapBgEmColorProp="mapBgEmColorProp" :showProvinces="showProvinces"></EchartMap>
  </div>
</template>
<script>
import { requestHFCity } from '@/api/request.js'
import { mapMutations } from "vuex";
import EchartMap from '@/components/EchartMap.vue'
import axios from 'axios'
export default {
  name: 'ViewMapChina',
  data() {
    return {
      ChinaMapName: '中国',
      ChinaSeriesMap: 'china',
      ChinaMapZoom: 1,
      ChinaMapTop: '50%',
      dataChinaMap: {},
      ChinaMapData: [
        { name: '北京市', value: 21893095 },
        { name: '天津市', value: 13866009 },
        { name: '河北省', value: 74610235 },
        { name: '山西省', value: 34915616 },
        { name: '内蒙古自治区', value: 24049155 },
        { name: '辽宁省', value: 42591407 },
        { name: '吉林省', value: 24073453 },
        { name: '黑龙江省', value: 31850088 },
        { name: '上海市', value: 24870895 },
        { name: '江苏省', value: 84748016 },
        { name: '浙江省', value: 64567588 },
        { name: '安徽省', value: 61027171 },
        { name: '福建省', value: 41540086 },
        { name: '江西省', value: 45188635 },
        { name: '山东省', value: 101527453 },
        { name: '河南省', value: 99365519 },
        { name: '湖北省', value: 57752557 },
        { name: '湖南省', value: 66444864 },
        { name: '广东省', value: 126012510 },
        { name: '广西', value: 50126804 },
        { name: '海南省', value: 10081232 },
        { name: '重庆市', value: 32054159 },
        { name: '四川省', value: 83674866 },
        { name: '贵州省', value: 38562148 },
        { name: '云南省', value: 47209277 },
        { name: '西藏自治区', value: 3648100 },
        { name: '陕西省', value: 39528999 },
        { name: '甘肃省', value: 25019831 },
        { name: '青海省', value: 5923957 },
        { name: '宁夏回族自治区', value: 7202654 },
        { name: '新疆维吾尔自治区', value: 29852345 },
        { name: '台湾省', value: 7474200 },
        { name: '香港特别行政区', value: 683218 },
        { name: '澳门特别行政区', value: 23561236 }
      ],
      ChinaMapVMap: {
        type: 'continuous',
        left: 'right',
        min: 3000000,
        max: 127000000,
        inRange: {
          color: [
            '#313695',
            '#4575b4',
            '#74add1',
            '#abd9e9',
            '#e0f3f8',
            '#ffffbf',
            '#fee090',
            '#fdae61',
            '#f46d43',
            '#d73027',
            '#a50026'
          ]
        },
        text: ['High', 'Low'],
        calculable: true,
        seriesIndex: 0,
        // itemWidth: 20,
        // itemHeight: 120
      },
      showVisualMap:false,
      mapBgColorProp: "#192f5a",
      mapBgEmColorProp: "#0ee3f6",
      showProvinces:['山东省','云南省','广西','海南省'],
      hefengKey: 'a981619d96b54e83a1425eff4e342267',
      myChart: {},
      centers:[],
      centersData:[],
      highlightScatterOld: 0,
      highlightScatterNow: 1,
      highlightCityNameOld: '',
      highlightCityNameNow: '山东省'
    }
  },
  mounted() {
    this.getChinaMap();
  },
  methods: {
    ...mapMutations(['setProIdStore','setHighlightCityNameStore','setHFCityNoStore']),
    getChinaMap(){
      // 获取本地json文件中的数据
      // 在vue3中 需要把json文件放置在 public 文件夹下，必须用‘./’路径获取json文件
      axios.get('./json/china.json').then(res=>{
        this.dataChinaMap = res.data;
      })
    },
    getCity(province){
      let cityName = '';
      if (province=='山东省') {
        cityName = '海阳';
      }else if(province=='云南省'){
        // cityName = '西双版纳';
        cityName = '云南';
      }else if(province=='海南省'){
        cityName = '海南';
      }else if(province=='广西'){
        cityName = '广西';
      }else{
        cityName = province
      }
      return cityName
    },
    getCityNo(province) {
      let cityName = this.getCity(province)
      requestHFCity({
        url: '/city/lookup?location='+cityName+'&key='+this.hefengKey,
        method: 'get'
      }).then(res => {
        this.setHFCityNoStore(res.data.location[0].id);
      });
    }
  },
  components:{
    EchartMap
  },
  computed:{
  },
  watch: {
    '$store.state': {
      deep: true,
      immediate: false,
      handler() {
        this.$nextTick(()=>{
          
        })
      }
    },
  },
}
</script>
<style lang="less" scoped>
.container{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: transparent;
  border: 0px solid red;
}
</style>